<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="固定维度" prop="fixLabels">
            <el-select
              v-model="queryParams.fixLabels"
              placeholder="请选择固定维度"
            >
              <el-option
                v-for="item in fixLabelDatas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-switch
            v-model="customFlag"
            active-text="预测"
            inactive-text="实际"
            @change="handleChangeSwitch"
            style="margin-top: 6px"
          >
          </el-switch>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="8">
      <el-col :span="12">
        <div style="height: 450px" ref="lineCharts" id="lineCharts"></div>
      </el-col>
      <el-col :span="12">
        <div style="height: 450px" ref="lineCharts2" id="lineCharts2"></div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-table v-loading="loading" :data="historyArea">
          <el-table-column
            prop="areaId"
            label="方位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="radarArea"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="correctRate"
            label="距离"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="locationDeviation"
            label="频率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviation"
            label="实际能量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distanceDeviationUnAbs"
            label="预测能量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="directionDeviation"
            label="预测误差"
            align="center"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/styles/dataoverview.scss";
import moment from "moment";
import { worldMap } from "@/assets/mapJson/worldMap";
import { nameMapData } from "@/assets/mapJs/common";
import ShowModal from "./compoments/showModal";
//注册中国地图
echarts.registerMap("worldMap", worldMap, {});
import {
  getDataoverViewList,
  getListPathByFlightType,
  getDict,
  getFlightFrequencyList,
  getListByUniqueBatchNoList,
  getListAreaStat,
  exportAreaStat,
  getStatAreaHourDeviation,
  getIonosphereCoverList,
} from "@/api/service";
export default {
  name: "",
  components: {},
  data() {
    return {
      customFlag: false,
      loading: false,
      // 显示搜索条件
      showSearch: true,
      tabsValue: "",
      messageRelate: null, //关联值
      tabPosition: "hot",
      channels: [],
      dataVolumes: [],
      hotDoatData: [], //热力图数据
      listDatas: [],
      dataSource: [],
      fixLabelDatas: [
        { label: "方位范围", value: "exploreDirection" },
        { label: "探测时间", value: "exploreTime" },
        { label: "探测频率", value: "exploreFrequency" },
        { label: "探测距离", value: "exploreDistance" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fixLabels: undefined,
      },
      mapGeoData: null,
      forChartsMapData: [],
      echartsData: [],
      data: [],
      newDataPlane: [],
      flightDotData: [],
      historyArea: [],
      leftEchartsData: [],
      leftTableList: [],
      showHistoryList: [],
      showHistoryList1: [],
      showHistoryList2: [],
      dataList: [],
      sourceId: "8203",
      newTableData: [], //实时右边表格
      //展示弹窗
      modalListFromArea: [],
      modelOpen: false,
    };
  },
  mounted() {
    this.getList();
    this.initEcharts();
  },
  methods: {
    handleChangeSwitch() {
      console.log("switch value:", this.customFlag);
      if (this.customFlag) {
      } else {
      }
    },
    initEcharts() {
      //line  lineCharts
      const lineCharts = echarts.init(this.$refs.lineCharts);
      let lineOption = {
        backgroundColor: "#1a203a",
        title: {
          text: "电离层统计",
          textStyle: {
            color: "#fff",
          },
          left: "center",
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            let x = params?.data?.[0];
            let y = params?.data?.[1];
            return (
              this.dataSource?.xtag +
              this.dataSource?.xlabels[x] +
              "，" +
              this.dataSource?.ytag +
              this.dataSource?.ylabels[y] +
              "，实际能量：" +
              params.value[2]
            );
          },
        },
        grid: {
          left: "2%",
          bottom: 10,
          right: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: this.dataSource?.xtag,
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          data: this.dataSource?.xlabels,
          boundaryGap: false,
          splitLine: {
            show: true,
            // lineStyle: {
            //   type: 'dashed',
            // },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          name: this.dataSource?.ytag,
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          data: this.dataSource?.ylabels,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "scatter",
            symbolSize: function (val) {
              return 10;
            },
            data: this.dataSource?.actualEnergys,
            animationDelay: function (idx) {
              return idx * 5;
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let data = params?.value[2];
                  return this.getEchartsColor(data);
                },
              },
            },
            symbol: "diamond",
          },
        ],
      };
      document
        .getElementById("lineCharts")
        .removeAttribute("_echarts_instance_");
      lineCharts.setOption(lineOption);

      //右侧图表
      const lineCharts2 = echarts.init(this.$refs.lineCharts2);
      let lineOption2 = {
        backgroundColor: "#1a203a",
        title: {
          text: "电离层预测",
          textStyle: {
            color: "#fff",
          },
          left: "center",
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            let x = params?.data?.[0];
            let y = params?.data?.[1];
            return (
              this.dataSource?.xtag +
              this.dataSource?.xlabels[x] +
              "，" +
              this.dataSource?.ytag +
              this.dataSource?.ylabels[y] +
              "，预测能量：" +
              params.value[2]
            );
          },
        },
        grid: {
          left: "2%",
          bottom: 10,
          right: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: this.dataSource?.xtag,
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          data: this.dataSource?.xlabels,
          boundaryGap: false,
          splitLine: {
            show: true,
            // lineStyle: {
            //   type: 'dashed',
            // },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          name: this.dataSource?.ytag,
          nameLocation: "end",
          nameTextStyle: {
            color: "#fff",
          },
          data: this.dataSource?.ylabels,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "scatter",
            symbolSize: function (val) {
              return 20;
            },
            data: this.dataSource?.predictEnergys,
            animationDelay: function (idx) {
              return idx * 5;
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value[2] > 2814071.25) {
                    return this.getEchartsColor(1);
                  } else {
                    return this.getEchartsColor(2);
                  }
                },
              },
            },
            symbol: "pin",
          },
        ],
      };

      document
        .getElementById("lineCharts2")
        .removeAttribute("_echarts_instance_");
      lineCharts2.setOption(lineOption2);
    },

    //渐变色的选择电离层的数据
    getEchartsColor(params) {
      if (params <= 50) {
        return `rgba(253, 253, 2, ${(params * 0.15).toFixed(1)})`; //黄
      } else if (params > 50 && params <= 100) {
        return `rgba(255, 130, 0, ${(params * 0.15).toFixed(1)})`; //橘
      } else {
        return `rgba(255, 2, 0, ${(params * 0.15).toFixed(1)})`; //红
      }
    },

    //历史的区域修正
    modifyHandle() {},

    //历史的区域展示
    handleDisplayMapModal(row) {
      let data = {
        areaId: row.areaId,
        endTime: this.queryParams.endTime,
        startTime: this.queryParams.startTime,
        sourceId: this.queryParams.sourceId,
      };
      getStatAreaHourDeviation(data).then((res) => {
        if (res.code === 200) {
          this.modalListFromArea(res.data);
          this.modelOpen = true;
        }
      });
    },

    handleExport() {
      let data = {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        sourceId: this.queryParams.sourceId,
      };
      exportAreaStat(data).then((res) => {});
    },
    seriesFormatShow() {
      let series = [];
      this.flightDotData &&
        this.flightDotData
          .filter((item) => {
            return item?.length > 0;
          })
          //过滤数据空的航迹点
          .map((iten) => {
            if (iten.length > 1) {
              series.push(
                {
                  type: "lines", //第一条实线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "block",
                    width: 2,
                  },
                  effect: {
                    //线特效，小飞机
                    constantSpeed: 10,
                    show: true,
                    color: "yellow", //#00EAFF
                    symbolSize: 15,
                    symbol: planePath,
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  type: "lines", //第二条虚线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "#fff",
                    width: 2,
                    type: "dashed",
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                }
              );
            }
          });

      this.flightDotData1 &&
        this.flightDotData1
          .filter((item) => {
            return item?.length > 0;
          })
          .map((iten) => {
            if (iten.length > 1) {
              series.push(
                {
                  type: "lines", //第一条实线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "block",
                    width: 2,
                  },
                  effect: {
                    //线特效，小飞机
                    constantSpeed: 10,
                    show: true,
                    color: "red", //#00EAFF
                    symbolSize: 15,
                    symbol: planePath,
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  type: "lines", //第二条虚线
                  coordinateSystem: "geo", // 这句的意思是连线是基于地理坐标的,geo组件将在下面给出
                  polyline: true, // 这表示连线是否为多端点的连线
                  data: [
                    {
                      coords: iten,
                    },
                  ],
                  lineStyle: {
                    color: "#fff",
                    width: 2,
                    type: "dashed",
                  },
                  progressiveThreshold: 500,
                  progressive: 200,
                },
                {
                  // name: '基地',
                  type: "effectScatter",
                  coordinateSystem: "geo",
                  data: convertData(forChartsMapData),
                  colorBy: "data",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    scale: 4,
                    brushType: "stroke",
                  },
                  symbolSize: 6,
                  symbol: "circle",
                  label: {
                    normal: {
                      show: true, //显示市区标签
                      textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                      formatter: (params) => {
                        return params?.data?.[3];
                      },
                      position: ["-130%", "150%"],
                    },
                    emphasis: {
                      //对应的鼠标悬浮效果
                      show: false, //关闭文字 （这东西有问题得关）
                      textStyle: { color: "transparent" },
                    },
                  },
                  // itemStyle: {
                  //   normal: {
                  //     borderWidth: 7, //区域边框宽度
                  //     borderColor: '#fc8452', //区域边框颜色
                  //     areaColor: '#fc8452', //区域颜色
                  //   },
                  // },
                }
              );
            }
          });

      series.push({
        type: "lines",
        polyline: true,
        coordinateSystem: "geo",
        lineStyle: {
          type: "dashed",
          color: "yellowGreen",
          width: 2,
          opacity: "0.5",
        },
        effect: {
          show: true,
          trailLength: 0.1,
          symbol: "none",
          symbolSize: 8,
        },
        data: this.historyArea,
      });
      return series;
    },
    getHistoryListAreaStat() {
      getListAreaStat(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.historyArea(res.data);
        }
      });
    },

    //历史关联数据
    handleDisplayMap(record) {
      let data = {
        uniqueBatchNo: record?.uniqueBatchNo,
      };
      getListByUniqueBatchNoList(data).then((res) => {
        console.log(502, res);
        if (res.code == 200) {
          this.leftEchartsData = res.data?.locationRadarDeviations || [];
          let showItnerList = res.data?.locationRadar?.map((item) => {
            return [item?.longitude, item?.latitude, item?.locationDeviation];
          });
          let showItnerList1 = res.data?.locationRadar?.map((item) => {
            return [item?.longitude, item?.latitude];
          });
          //添加辅助飞行线
          let showItnerList2 = res.data?.locationReals?.map((item) => {
            return [item?.longitude, item?.latitude];
          });
          this.leftTableList = res.data?.locationRadarDeviations || [];
          this.newDataPlane = res.data?.locationRadarDeviations
            ? res.data?.locationRadarDeviations.reverse()
            : [];
          if (historyList.length > 0) {
            this.showHistoryList = showItnerList;
            this.showHistoryList1 = [showItnerList1];
            this.showHistoryList2 = [showItnerList2];
          } else {
            this.showHistoryList = [];
            this.showHistoryList1 = [];
            this.showHistoryList2 = [];
          }
        }
      });
    },
    //切换地图
    handleTabPosition(val) {
      console.log("handleTabPosition:", val);
      if (val == "line") {
        //航线图
        this.getItineraryData();
      } else {
        //热力图
      }
    },
    //将数据处理给到航迹
    getItineraryData() {
      let data = this.newDataPlane.map((item) => {
        if (item?.longitude && item?.latitude) {
          return [item?.longitude, item?.latitude];
        }
      });
      console.log(620, data);
      this.flightDotData.push(data);
      console.log(621, this.flightDotData);
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    getList() {
      getIonosphereCoverList(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.listDatas = res?.data?.coverPowers;
          this.dataSource = res.data;
        }
      });
    },
    filterData(value) {
      let data =
        this.frequencyData &&
        this.frequencyData.filter((item) => {
          return item?.dictValue == value;
        });
      console.log("filterData", data[0]?.dictLabel, frequencyData);
      return data[0]?.dictLabel;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.mapGeoData[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
      }
      return res;
    },
    //频率
    //获取飞行航迹的展示
    handleGetListPathByFlightType(params) {
      getListPathByFlightType(params).then((res) => {
        if (res.code == 200) {
          let dataSouce3 = [];
          let dataSouce2 = res?.data
            ?.map((item) => {
              return item?.locationList?.map((iten) => {
                return [iten?.longitude, iten?.latitude, undefined];
              });
            })
            .filter((itex) => {
              return itex;
            })
            .map((itey) => {
              console.log(2222, itey);
              return dataSouce3.push(...itey);
            });
          console.log("hotDoatData:", dataSouce3);
          this.hotDoatData = dataSouce3;
          this.initEchartsHot();
        }
      });
    },
    radarBtnClick(val) {
      console.log("radarBtnClick", val);
      switch (val) {
        case "editFlowChart":
          this.$router.push({
            path: "/dataAnalysis/editFlowChart",
            query: {},
          });
          break;
        case "radarSpectrum":
          this.$router.push({
            path: "/dataAnalysis/spotevalution8203",
            query: {},
          });
          break;
        case "radarPlot":
          this.$router.push({
            path: "/dataAnalysis/spotevalutionyangben",
            query: {},
          });
          break;
        case "matchingRelation":
          this.$router.push({
            path: "/dataAnalysis/relateform",
            query: {},
          });
          break;
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-statistic .con .number {
  color: #c4ebff;
}
::v-deep .topH2Style .con .number {
  font-size: 32px;
}
::v-deep .el-radio-group {
  width: 100%;
}
::v-deep .el-radio-group .el-radio-button {
  width: 50%;
}
::v-deep .el-radio-group .el-radio-button .el-radio-button__inner {
  width: 100%;
}
</style>
